﻿

@model List<Common.Param_Strateg>

<html>
<head>
    <meta charset="utf-8">
    <title>攻略</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link href="https://cdn.staticfile.org/layui/2.7.6/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="/Content/layuiadmin/style/admin.css" media="all">
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-container">
            <div class="layui-row">
                <div class="layui-col-xs10 layui-col-xs-offset1">
                    <form class="layui-form" style="margin-right:60px;" lay-filter="form" onsubmit="return false">
                        <div class="layui-form-item">
                            <label class="layui-form-label">攻略分类</label>
                            <div class="layui-input-block">
                                <select name="cate" id="cate" lay-verify="required">
                                    @foreach (var item in Model)
                                    {
                                        <option value="@item.STypeID" >@item.STypeName</option>
                                    }
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">攻略名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="StrategName" id="StrategName" required lay-verify="required" placeholder="请输入攻略名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">攻略描述</label>
                            <div class="layui-input-block">
                                <textarea name="describe" id="Describe" lay-verify="Describe" placeholder="请输入攻略描述" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">攻略图片</label>
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn" id="test1">
                                    <i class="layui-icon">&#xe67c;</i>上传图片
                                </button> <br />
                                <input type="image" style="max-height:100px;" name="SImage" id="SImage" lay-verify="required" value="" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">是否显示</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="Show" id="Show" lay-skin="switch">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn sub" lay-submit lay-filter="formDemo">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.staticfile.org/layui/2.7.6/layui.js"></script>
    <script>
        layui.config({
            base: '/Content/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'set']);
    </script>

    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Scripts/dist/html5ImgCompress.min.js"></script>
    <script src="~/Scripts/tools.js"></script>
    <script>
        var data = {};

        //Demo
        $(function () {
            layui.use(function () {
                var form = layui.form;
                var upload = layui.upload;
                var uploadInst = upload.render({
                    elem: '#test1' //绑定元素
                    , url: '' //上传接口
                    , auto: false//是否自动上传
                    , bindAction: "#BTN"
                    , size: 2048 //上传图片大小限制 KB
                    , number: 1 //同时上传数量
                    , accept: "images" //文件类型
                    , acceptMime: 'image/*'
                    , choose: function (obj) {
                        //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                        obj.preview(function (index, file, result) {
                            //console.log(index); //得到文件索引
                            console.log(file); //得到文件对象
                            //console.log(result); //得到文件base64编码，比如图片

                            new html5ImgCompress(file, {
                                before: function (file) {
                                    console.log('压缩前...');
                                    // 这里一般是对file进行filter，例如用file.type.indexOf('image') > -1来检验是否是图片
                                    // 如果为非图片，则return false放弃压缩（不执行后续done、fail、complete），并相应提示
                                    if (file.type.indexOf('image') == -1) {
                                        layer.msg("图片格式错误", { icon: 5, anim: 6 });
                                        return false;
                                    }
                                },
                                done: function (file, base64) {
                                    console.log('压缩成功...');
                                    //console.log(base64);
                                    data.SImage = base64;
                                    $("#SImage").attr("src", base64).val(base64);
                                    $("#SImage").click(function () {
                                        openimg(`${base64}`);
                                        return false;
                                    })
                                    // ajax和服务器通信上传base64图片等操作
                                },
                                fail: function (file) {
                                    console.log('压缩失败...');
                                },
                                complete: function (file) {
                                    console.log('压缩完成...');
                                },
                                notSupport: function (file) {
                                    console.log('浏览器不支持！')
                                    // 不支持操作，例如PC在这里可以采用swfupload上传
                                }
                            });

                            //obj.resetFile(index, file, '123.jpg'); //重命名文件名，layui 2.3.0 开始新增

                            //这里还可以做一些 append 文件列表 DOM 的操作

                            //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
                            //delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
                        });

                    }
                    , done: function (res) {
                        //上传完毕回调
                    }
                    , error: function () {
                        //请求异常回调
                    }
                });

                form.on('submit(form)', function () {
                    // 验证均通过后的操作（如 Ajax 提交）

                    if (data.SImage == undefined || data.SImage == "") {
                        console.log(data.SImage);
                        layer.msg("图片不能为空", { icon: 5, anim: 6 });
                        return false;
                    }
                    var index = layer.load(1, { shade: [0.6, "#fff"] });
                    data.StrategName = $("#StrategName").val();
                    data.Describe = $("#Describe").val();
                    data.Show = $("#Show")[0].checked;
                    data.STypeID = $("#cate").val();
                    data.CreateTime = new Date();
                    //console.log(data);
                    $.post(apiurl + "api/Strateg/Add", data, function (res) {
                        console.log(res);
                        if (res.Code == 200) {
                            setTimeout(() => {
                                layer.close(index);
                                layer.msg("添加成功", { icon: 6, time: 500 });
                                setTimeout(() => {
                                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                                    parent.location.reload();
                                }, 600)
                            }, 300);
                        }
                        else {
                            layer.msg("添加失败", { icon: 5, anim: 6, time: 500 });
                        }
                    })
                });

                //执行实例
                //form.verify({
                //    tname: function (value, item) { //value：表单的值、item：表单的DOM对象
                //        if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                //            return '用户名不能有特殊字符';
                //        }
                //        if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                //            return '用户名首尾不能出现下划线\'_\'';
                //        }
                //        if (/^\d+\d+\d$/.test(value)) {
                //            return '用户名不能全为数字';
                //        }

                //        //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
                //        if (value === 'xxx') {
                //            alert('用户名不能为敏感词');
                //            return true;
                //        }
                //    }

                //    //我们既支持上述函数式的方式，也支持下述数组的形式
                //    //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
                //    , pass: [
                //        /^[\S]{6,12}$/
                //        , '密码必须6到12位，且不能出现空格'
                //    ]
                //});

            });
        })

    </script>

</body>
</html>



